<template>
  <Screen v-if="screening" />
  <Editor v-else-if="isPC" />
  <Mobile v-else />
  <MediaLibrary />

</template>

<script lang="ts">
import { defineComponent, onBeforeUnmount, onMounted, onUnmounted, reactive } from 'vue'
import { storeToRefs } from 'pinia'
import { useScreenStore, useMainStore, useSnapshotStore } from '@/store'
import useScreening from '@/hooks/useScreening'

import { isPC } from '../../utils/common'
import { useRoute } from 'vue-router'

import Editor from '../Editor/index.vue'
import Screen from '../Screen/index.vue'
import Mobile from '../Mobile.vue'
import request from '@/utils/request'
import MediaLibrary from "@/components/MediaLibrary.vue"

export default defineComponent({
  name: 'app',
  components: {
    Editor,
    Screen,
    Mobile,
    MediaLibrary
  },
  setup() {
    const route = useRoute()
    const mainStore = useMainStore()
    const screenStore = useScreenStore()
    const snapshotStore = useSnapshotStore()
    const { screening } = storeToRefs(useScreenStore())
    const { enterScreening, enterScreeningFromStart } = useScreening()

    let pageInfo = reactive({})
    if (process.env.NODE_ENV === 'production') {
      window.onbeforeunload = () => true
    }

    onMounted(() => {
      snapshotStore.initSnapshotDatabase()
      mainStore.setAvailableFonts()
    })
    onBeforeUnmount(() => {
      screenStore.setRenderData(true)
    })
    return {
      screening,
      isPC: isPC(),
      pageInfo,
      enterScreeningFromStart,
      enterScreening
    }
  },
})
</script>

<style lang="scss">
#app {
  height: 100%;
}
</style>